<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>简历墙</title>
    <link rel="stylesheet" href="./css/base.css">
    <link rel="stylesheet" href="./css/iconfont.css">
    <!-- 新 Bootstrap 核心 CSS 文件 -->
    <link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>

    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

    <style>
        html,
        body {
            width: 100%;
            height: 100%;
            background: #F6F6F6;
        }

        .container {
            padding: 0px;

            margin-right: auto;
            margin-left: auto;
            background: #F6F6F6;
        }

        .nav-tabs {
            border-bottom: 1px solid #ddd;
            border-top: 0.5px #ddd solid;
            border-radius: 16px 16px 0px 0px;
            display: flex;
            justify-content: space-between;
            background: #fff;
        }


        .nav-tabs .active a {
            border: none !important;
            border-bottom: solid 3px #3498db !important;
        }

        .item-tite {
            font-size: 1.5rem;
            text-align: center;
            height: 1.5rem;
            position: relative;
            top: 1rem;
            margin-bottom: 2rem;
        }

        .item-table {
            width: 100%;
            position: fixed;
            z-index: 400;
            padding-top: 1rem;
            background: #F6F6F6;
        }

        .finshed {
            text-align: center;
        }

        .item-container {
            width: 100%;
            height: 10rem;
            background: #fff;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: row;
            padding: 0.5rem 1rem;
            border-bottom: 1px #ddd solid;
            border-radius: 8px;
            margin-bottom: 1rem;
        }

        .item-container .left-has-img {
            width: 28%;
            height: 100%;
            /* background: forestgreen; */
            position: relative;
        }

        .item-container .item-content {
            width: 72%;
            height: 100%;
            margin-left: 1rem;
            /* background: gold; */
        }

        .item-content .content-person {
            padding: 1rem 1rem 0rem 0rem;
            font-size: 1.58rem;
            font-weight: 600;
        }

        .item-content .content-edu {
            padding: 0.5rem 1rem 1rem 1rem;
        }

        .item-container .left-has-img img {
            position: absolute;
            width: 6.2rem;
            height: 6.2rem;
            border-radius: 50%;
            left: 0.5rem;
            top: 1.5rem;
        }

        .tab-content {
            padding: 0rem 0.5rem;
            background: #F6F6F6;
            padding-top: 9rem;
        }

        .item-content .content-person .has-margin {
            margin-left: 3rem;
        }

        .item-content .p .has-style {
            color: #888888;
        }

        .my-icon-shijian:before {
            content: "\e684";
            color: #888;
        }

        .my-icon-zhanghao:before {
            content: "\e678";
            color: #888;
        }

        .top-head {
            text-align: center;
            font-size: 1.3rem;
            height: 1.6rem;
            padding: 1rem;

        }

        .my-icon-arrow-down:before {
            content: "\e607";
            font-size: 1rem;
        }

        .filter-bar {
            display: flex;
            justify-content: space-around;
            position: relative;
            background: #fff;
            width: 100%;
            padding: 1rem 0rem 1rem 0rem;
        }

        .filter-bar .has-b {
            display: flex;
        }

        .has-b i {
            margin-left: 4px;
        }

        #tab-content {
            position: relative;
            top: 9rem;
        }

        .picker .picker-mask.show {
            background: rgba(0, 0, 0, .6);
            opacity: 1;
        }

        .picker {
            z-index: 600 !important;
        }

        .item-content p {
            margin: 0 !important;
            padding: 1px;
        }

        .pull-loading {
            text-align: center;
        }
    </style>
</head>

<body>
    <div class="container">

        <div class="item-table">
            <ul id="myTab" class="nav nav-tabs">
                <li class="active"><a href="#table1" data-toggle="tab">全部</a></li>
                <li><a href="#table2" data-toggle="tab">已收藏</a></li>
                <li><a href="#table3" data-toggle="tab">已邀请</a></li>
            </ul>
            <div class="filter-bar">
                <div class="has-b">
                    <div id="school">
                        <span>学校筛选</span>

                    </div>
                    <i class="iconfont my-icon-arrow-down"></i>
                </div>
                <div class="has-b">
                    <div id="job">
                        <span>职位筛选</span>

                    </div>
                    <i class="iconfont my-icon-arrow-down"></i>
                </div>
            </div>
        </div>
        <div id="wrapper" style="margin-top:9rem;">
            <div id="scroller">
                <ul class="item-list">
                    <li>
                    </li>
                </ul>
                <div class="pull-loading">
                </div>
            </div>
        </div>
    </div>


</body>
<script src="js/picker.min.js"></script>
<script src="./js/iscroll.js"></script>
<script>
    //tab

    var arr = [
        {
            list: [
                {
                    id: '1',
                    url: '',
                    name: '谭小庆',
                    sex: '男',
                    year: '2001',
                    edu: '教授',
                    date: '2001-1231-1231',
                    time: '20:12',
                    job: 'web',
                    salary: '20k~200k'
                },
                {
                    id: '1',
                    url: '',
                    name: '谭小庆',
                    sex: '男',
                    year: '2001',
                    edu: '教授',
                    date: '2001-1231-1231',
                    time: '20:12',
                    job: 'web',
                    salary: '20k~200k'
                },
                {
                    id: '1',
                    url: '',
                    name: '谭小庆',
                    sex: '男',
                    year: '2001',
                    edu: '教授',
                    date: '2001-1231-1231',
                    time: '20:12',
                    job: 'web',
                    salary: '20k~200k'
                },
            ]
        },
        {
            list: [
                {
                    id: '1',
                    url: 'image/t1.png',
                    name: '谭小庆',
                    sex: '男',
                    year: '2001',
                    edu: '教授',
                    date: '2001-1231-1231',
                    time: '20:12',
                    job: 'web',
                    salary: '20k~200k'
                },
                {
                    id: '1',
                    url: 'image/t1.png',
                    name: '谭小庆',
                    sex: '男',
                    year: '2001',
                    edu: '教授',
                    date: '2001-1231-1231',
                    time: '20:12',
                    job: 'web',
                    salary: '20k~200k'
                },
                {
                    id: '1',
                    url: 'image/t1.png',
                    name: '谭小庆',
                    sex: '男',
                    year: '2001',
                    edu: '教授',
                    date: '2001-1231-1231',
                    time: '20:12',
                    job: 'web',
                    salary: '20k~200k'
                },
            ]
        },
        {
            list: [
                {
                    id: '1',
                    url: '',
                    name: '谭小庆',
                    sex: '男',
                    year: '2001',
                    edu: '教授',
                    date: '2001-1231-1231',
                    time: '20:12',
                    job: 'web',
                    salary: '20k~200k'
                },
                {
                    id: '1',
                    url: '',
                    name: '谭小庆',
                    sex: '男',
                    year: '2001',
                    edu: '教授',
                    date: '2001-1231-1231',
                    time: '20:12',
                    job: 'web',
                    salary: '20k~200k'
                },
                {
                    id: '1',
                    url: '',
                    name: '谭小庆',
                    sex: '男',
                    year: '2001',
                    edu: '教授',
                    date: '2001-1231-1231',
                    time: '20:12',
                    job: 'web',
                    salary: '20k~200k'
                },
            ]
        }
    ]
    $(function () {
        $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
            //为tab按钮绑定事件
            //    alert("sdasd")
            var key = $(this).parent().index();

            var res = arr[key].list; // 后台返回的数据

            // 成功回调后执行的语句
            htmls(res);
            switch (key) {
                case 0:
                    // $.ajax({
                    //     type: "POST",
                    //     url: "",
                    //     data: key,
                    //     success: function (res) {
                    //         $('#table1').load('url');
                    //     }

                    // });
                    var res = arr[key].list; // 后台返回的数据

                    // 成功回调后执行的语句
                    htmls(res);
                    break;
                case 1:
                    // $.ajax({
                    //     type: "POST",
                    //     url: "",
                    //     data: key,
                    //     success: function (res) {
                    //         $('#table2').load('url2');
                    //     }
                    // });
                    var res = arr[key].list; // 后台返回的数据

                    // 成功回调后执行的语句
                    htmls(res);

                    break;
                case 2:
                    // $.ajax({
                    //     type: "POST",
                    //     url: "",
                    //     data: key,
                    //     success: function (res) {
                    //         $('#table3').load('url3');
                    //     }
                    // });
                    var res = arr[key].list; // 后台返回的数据

                    // 成功回调后执行的语句
                    htmls(res);

                    break;
            }


        });
        $('ul.nav-tabs li.active a[data-toggle="tab"]').trigger("shown.bs.tab");//默认触发  
    });
    //picker选择器
    var nameEl = document.getElementById('school');
    var schooldata = [//第一个picker的列表数据
        {
            text: '小美',
            value: 1
        }, {
            text: '猪猪',
            value: 2
        }
    ];
    var picker = new Picker({
        data: [schooldata],
        selectedIndex: [0],
    });
    picker.on('picker.select', function (selectedVal, selectedIndex) {
        nameEl.innerText = schooldata[selectedIndex[0]].text;//选择后做些事情，这里是改变了nameEL的内容
        // $.ajax({
        //     type: "POST",
        //     url: "",
        //     data: key,
        //     success: function (res) {
        //         $('#table1').load('url');
        //     }

        // });
        var arr = [
            {
                list: [
                    {
                        id: '1',
                        url: '',
                        name: '谭小庆',
                        sex: '男',
                        year: '2001',
                        edu: '教授',
                        date: '2001-1231-1231',
                        time: '20:12',
                        job: 'web',
                        salary: '20k~200k'
                    },
                    {
                        id: '1',
                        url: '',
                        name: '谭小庆',
                        sex: '男',
                        year: '2001',
                        edu: '教授',
                        date: '2001-1231-1231',
                        time: '20:12',
                        job: 'web',
                        salary: '20k~200k'
                    },
                    {
                        id: '1',
                        url: '',
                        name: '谭小庆',
                        sex: '男',
                        year: '2001',
                        edu: '教授',
                        date: '2001-1231-1231',
                        time: '20:12',
                        job: 'web',
                        salary: '20k~200k'
                    },
                    {
                        id: '1',
                        url: '',
                        name: '谭小庆',
                        sex: '男',
                        year: '2001',
                        edu: '教授',
                        date: '2001-1231-1231',
                        time: '20:12',
                        job: 'web',
                        salary: '20k~200k'
                    },
                    {
                        id: '1',
                        url: '',
                        name: '谭小庆',
                        sex: '男',
                        year: '2001',
                        edu: '教授',
                        date: '2001-1231-1231',
                        time: '20:12',
                        job: 'web',
                        salary: '20k~200k'
                    },
                    {
                        id: '1',
                        url: '',
                        name: '谭小庆',
                        sex: '男',
                        year: '2001',
                        edu: '教授',
                        date: '2001-1231-1231',
                        time: '20:12',
                        job: 'web',
                        salary: '20k~200k'
                    },
                ]
            },
        ]

        var res = arr[0].list;
        htmls(res);
        // 
    })

    picker.on('picker.change', function (index, selectedIndex) {
        //picker改变做些事情
        //       
        // 
    });

    picker.on('picker.valuechange', function (selectedVal, selectedIndex) {
        //选取元素发生改变做些事情

    });

    nameEl.addEventListener('click', function () {
        picker.show();//控制picker可见性
    });
    var nameEl2 = document.getElementById('job');
    var jobdata = [//第二个picker的列表数据
        {
            text: '小',
            value: 3
        }, {
            text: '猪',
            value: 4
        }
    ];
    var picker2 = new Picker({
        data: [jobdata],
        selectedIndex: [0],
    });
    picker2.on('picker.select', function (selectedVal, selectedIndex) {
        nameEl2.innerText = jobdata[selectedIndex[0]].text;
        // $.ajax({
        //     type: "POST",
        //     url: "",
        //     data: key,
        //     success: function (res) {
        //         $('#table1').load('url');
        //     }

        // });

        var arr = [
            {
                list: [
                    {
                        id: '1',
                        url: '',
                        name: '谭小庆',
                        sex: '男',
                        year: '2001',
                        edu: '教授',
                        date: '2001-1231-1231',
                        time: '20:12',
                        job: 'web',
                        salary: '20k~200k'
                    },
                    {
                        id: '1',
                        url: '',
                        name: '谭小庆',
                        sex: '男',
                        year: '2001',
                        edu: '教授',
                        date: '2001-1231-1231',
                        time: '20:12',
                        job: 'web',
                        salary: '20k~200k'
                    },
                    {
                        id: '1',
                        url: '',
                        name: '谭小庆',
                        sex: '男',
                        year: '2001',
                        edu: '教授',
                        date: '2001-1231-1231',
                        time: '20:12',
                        job: 'web',
                        salary: '20k~200k'
                    },
                    {
                        id: '1',
                        url: '',
                        name: '谭小庆',
                        sex: '男',
                        year: '2001',
                        edu: '教授',
                        date: '2001-1231-1231',
                        time: '20:12',
                        job: 'web',
                        salary: '20k~200k'
                    },
                    {
                        id: '1',
                        url: '',
                        name: '谭小庆',
                        sex: '男',
                        year: '2001',
                        edu: '教授',
                        date: '2001-1231-1231',
                        time: '20:12',
                        job: 'web',
                        salary: '20k~200k'
                    },
                    {
                        id: '1',
                        url: '',
                        name: '谭小庆',
                        sex: '男',
                        year: '2001',
                        edu: '教授',
                        date: '2001-1231-1231',
                        time: '20:12',
                        job: 'web',
                        salary: '20k~200k'
                    },
                    {
                        id: '1',
                        url: '',
                        name: '谭小庆',
                        sex: '男',
                        year: '2001',
                        edu: '教授',
                        date: '2001-1231-1231',
                        time: '20:12',
                        job: 'web',
                        salary: '20k~200k'
                    },
                    {
                        id: '1',
                        url: '',
                        name: '谭小庆',
                        sex: '男',
                        year: '2001',
                        edu: '教授',
                        date: '2001-1231-1231',
                        time: '20:12',
                        job: 'web',
                        salary: '20k~200k'
                    },
                    {
                        id: '1',
                        url: '',
                        name: '谭小庆',
                        sex: '男',
                        year: '2001',
                        edu: '教授',
                        date: '2001-1231-1231',
                        time: '20:12',
                        job: 'web',
                        salary: '20k~200k'
                    },
                ]
            },
        ]

        var res = arr[0].list;
        htmls(res);
    })

    picker2.on('picker.change', function (index, selectedIndex) {

    });

    picker2.on('picker.valuechange', function (selectedVal, selectedIndex) {

        // 
    });

    nameEl2.addEventListener('click', function () {
        picker2.show();
    });


    function htmls(res) {//tab加载数据的模板
        var html = ['<div id="scroller">',
            '<ul class="item-list">',
            '<li>'].join('');
        res.forEach(e => {
            html += [
                '<div id="' + e.id + '" class="item-container">',
                '<div class="left-has-img">',
                '<img src="' + e.url + '">',
                '</div>',
                '<div class="item-content">',
                '<p class="content-person">',
                '<span>' + e.name + '</span>',
                '<span class="has-margin">' + e.sex + '|' + e.year + '|' + e.edu + '</span>',
                '</p>',
                '<p class="content-time p">',
                '<i class="iconfont my-icon-shijian"></i>',
                '<span class="has-style">' + e.date + '&nbsp;' + e.time + '</span>',
                '</p>',
                '<p class="content-role p">',
                '<i class="iconfont my-icon-zhanghao"></i>',
                '<span class="has-style">' + e.job + '|' + e.salary + '</span>',
                '</p></div></div>',
            ].join('');

        });
        html = html + [
            '</li>',
            ' </ul>',
            '<div class="pull-loading hidden ">',
            '上拉加载',
            '</div>',
            '</div>',
        ].join('')
        $('#scroller').html(html);
    }
    //上拉加载
    var myscroll = new iScroll("wrapper", {
        onScrollMove: function () { //拉动时
            //上拉加载
            if (this.y < this.maxScrollY) {
                $(".pull-loading").html("释放加载");
                $(".pull-loading").addClass("loading");
            } else {
                $(".pull-loading").html("上拉加载");
                $(".pull-loading").removeClass("loading");
            }
        },
        onScrollEnd: function () { //拉动结束时
            //上拉加载
            if ($(".pull-loading").hasClass('loading')) {
                $(".pull-loading").html("加载中...");
                pullOnLoad();
            }
        }
        //        onRefresh: function () {
        //            $('.pull-loading').html("上拉加载");
        //        }
    });
    //上拉加载函数,ajax
    var page = 1; //每次加载10条
    function pullOnLoad() {
        setTimeout(function () {
            /*$.ajax({
                url: "json/data.json",
                type: "get",
                dataType: 'json',
                data:page
                success: function (data) {
                   page++;
                },
            });*/
            var arr = [
                {
                    list: [
                        {
                            id: '1',
                            url: '',
                            name: '谭小庆',
                            sex: '男',
                            year: '2001',
                            edu: '教授',
                            date: '2001-1231-1231',
                            time: '20:12',
                            job: 'web',
                            salary: '20k~200k'
                        },
                        {
                            id: '1',
                            url: '',
                            name: '谭小庆',
                            sex: '男',
                            year: '2001',
                            edu: '教授',
                            date: '2001-1231-1231',
                            time: '20:12',
                            job: 'web',
                            salary: '20k~200k'
                        },
                        {
                            id: '1',
                            url: '',
                            name: '谭小庆',
                            sex: '男',
                            year: '2001',
                            edu: '教授',
                            date: '2001-1231-1231',
                            time: '20:12',
                            job: 'web',
                            salary: '20k~200k'
                        },
                        {
                            id: '1',
                            url: '',
                            name: '谭小庆',
                            sex: '男',
                            year: '2001',
                            edu: '教授',
                            date: '2001-1231-1231',
                            time: '20:12',
                            job: 'web',
                            salary: '20k~200k'
                        },
                        {
                            id: '1',
                            url: '',
                            name: '谭小庆',
                            sex: '男',
                            year: '2001',
                            edu: '教授',
                            date: '2001-1231-1231',
                            time: '20:12',
                            job: 'web',
                            salary: '20k~200k'
                        },
                        {
                            id: '1',
                            url: '',
                            name: '谭小庆',
                            sex: '男',
                            year: '2001',
                            edu: '教授',
                            date: '2001-1231-1231',
                            time: '20:12',
                            job: 'web',
                            salary: '20k~200k'
                        },
                    ]
                },
            ]

            var res = arr[0].list;
            var html = htmls2(res);
            $("#scroller .item-list").append(html);
            myscroll.refresh();

        }, 1000);
    }
    function htmls2(res) {//上拉加载的内容
        var html = ['<div id="scroller">',
            '<ul class="item-list">',
            '<li>'].join('');
        res.forEach(e => {
            html += [
                '<div id="' + e.id + '" class="item-container">',
                '<div class="left-has-img">',
                '<img src="' + e.url + '">',
                '</div>',
                '<div class="item-content">',
                '<p class="content-person">',
                '<span>' + e.name + '</span>',
                '<span class="has-margin">' + e.sex + '|' + e.year + '|' + e.edu + '</span>',
                '</p>',
                '<p class="content-time p">',
                '<i class="iconfont my-icon-shijian"></i>',
                '<span class="has-style">' + e.date + '&nbsp;' + e.time + '</span>',
                '</p>',
                '<p class="content-role p">',
                '<i class="iconfont my-icon-zhanghao"></i>',
                '<span class="has-style">' + e.job + '|' + e.salary + '</span>',
                '</p></div></div>',
            ].join('');

        });
        html = html + [
            '</li>',
            ' </ul>',
            '<div class="pull-loading hidden ">',
            '上拉加载',
            '</div>',
            '</div>',
        ].join('')
        return html
    }
</script>

</html>